Upload (AJAX Toolkit API) |
Uploads files either to a server or to any application Connector from the client.
Syntax
This feature of Process Platform enables you to upload files to a service. For example, you may want to upload an application into the server to load it into Process Platform. Another example is uploading certificates while in Security Administration.
HTML |
<div cordysType="wcp.library.util.Upload" id="uploadID"/> |
where, uploadID is the unique identifier of the component.
Typically in Process Platform, all requests from the client are sent to the Gateway.wcp. When the upload library is used, the requests are sent to a Java class called Upload.wcp(com.eibus.Web.tools.upload.Upload.wcp), which in turn sends the requests to the Gateway.wcp. This library internally uses a HTM template called uploaddaemon.htm. This template gets updated with the number of file elements based on the fileCount property of the library, and sends the request to the Java class. This template HTML page, along with the file names and file content, sends a request SOAP message, which is contained in the request property, to Upload.wcp.
The upload component enables upload of multiple files to the server. The file content that must be uploaded must be sent in XML format and since some of the characters in the file content may not be compatible with XML, all files that are uploaded using this library are 'Base64' encoded.
While uploading files using the Upload component, a facility is provided where-in users can see the status of their message on uploading. This is possible by providing a property showStatus, which is a boolean value. Setting this to true will show a progress bar while uploading the content. Once the file is uploaded, a message that the file is uploaded is displayed and the progress bar closes.
In the SOAP message, the keywords Upload:FileName and Upload:FileContent are to be included in places where the file name and file content are to be present. Also, the keyword Upload:FileContent must not be an attribute of an element in the SOAP message.
If the file to be uploaded is large, then the Upload:FilePath property in the SOAP request is used. The file to be uploaded is stored at a temporary location specified by the property com.eibus.web.tools.upload.UploadWritePath present in the wcp.properties file and the SOAP request is sent to the service with the location of the temporary file.
The service can read the file from the temporary location.
If more than one file is to be uploaded, the filecount property of the component can be set to the number of files required. In such cases, the SOAP message must also be appropriately updated to include the keywords Upload:FileName<n> and Upload:FileContent<n> for all files, where n takes values from 1 to <filecount>.
Note:
- The maximum size of a file that can be uploaded depends on the load on the server.
- In the IIS 6.0 Web server, the content transfer from the client to IIS is restricted to 48 KB, by default. To upload files of larger sizes, the size allowed by IIS must be changed by the administrators. The adsutil script, which is available on installing IIS 6.0 can be used to set the size allowed for a virtual directory. The maximum size that can be set is 4 GB. The script is available at <IIS installation directory>/Adminscripts.
- The com.eibus.web.maxrequestsize property gives information to upload gateway about the request size (Kilobytes) threshold. On the basis of this information, the upload gateway chooses to either parse the entire request or in pieces. In case of piece by piece parsing, the upload gateway writes the uploaded file content to the temporary file created in a directory mentioned in the
com.eibus.web.tools.upload.UploadWritePathproperty.
For setting the size of a virtual directory, the following script must be used:
cscript adsutil.vbs set w3svc/1/ROOT/<virtual directory>/uploadreadaheadsize<size>
For example, to set the limit as 5 MB for the Process Platform virtual directory on the default Web site, use the following script:
cscript adsutil.vbs set w3svc/1/ROOT/cordys/uploadreadaheadsize 5120000
Note: While using the Upload component to upload non-XML files to the XML Store, the token Upload:FileContent in the request message must be enclosed by a user-defined tag and the encode property of the component must be set to 'true'.
To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the application object.
The following table lists the properties, methods and events of this component:
Table 1. List of Attributes
Attribute |
Property |
Description |
|---|---|---|
contentType |
contentType |
String that denotes the HTTP content type of the file to be uploaded. The default value is application or octet-stream. |
encode |
encode |
Boolean that specifies whether the uploaded files are to be encoded or not.
|
xmlcontent |
xmlcontent |
Boolean that specifies whether the content of uploaded files is XML or not. This property is used only when the
|
fileCount |
fileCount |
Integer that denotes the number of files that are to be uploaded. The upload component updates the template HTML page, which is used by it internally, with file elements based on the value of this property. By default, this is 1. Note: The application you are developing must take care of the number of files to be uploaded. For example, if user wants to upload three files then inside the 'form' element of the application, there must be three file input elements and the SOAP request must also be valid to upload three files. |
organization |
organization |
String that denotes the organization from which the request is sent. If not mentioned, it takes the default organization from the application. |
Object that contains the request SOAP message that must be sent to the Gateway.wcp. The request indicates the XML node from which the upload content is to be taken. |
||
showStatus |
showStatus |
Boolean that denotes whether the upload status is to be indicated or not.
|
timeout |
timeout |
Integer that denotes the time (in milliseconds) that can be taken for the upload Web service operation. By default, this is 30 seconds. |
receiver |
receiver |
String that denotes the service, service group, or the connection point to which the request is sent. If this is not specified, the request is sent to the first available service group that implements the namespace from the current organization of the user. |
resultHtml |
resultHtml |
If the user wants to modify the response sent by the Upload component, then the user can specify the desired response HTML in the Note: $RESPONSE is the place holder for the upload file response in the given resultHtml. |
Table 2. List of Methods
Method |
Description |
|---|---|
Uploads a file to the server or an application connector. Note: The Upload library expects a 'form' element and within the 'form' element, it expects an 'input' element. The 'input' element contains the details of the files to be uploaded. The following code is an example of the usage of the 'input' element within the 'form' element:
|
|
addFile |
Adds a file element to the template and also updates the Uploader.addFile(); Uploader.browse(index); Here index is the number of the file that must be added. For example, if two files were already uploaded, then the index value will be three. Note: Use of Note: If you want to upload more than one file in other browsers, the details of each file must be provided in the 'input' element within the 'form' element. |
Opens the Open File dialog box for the user to select a file. |
|
removeFile |
Removes a file element from the template and also updates the Upload.removeFile(); Uploader.addFile(); Uploader.browse(index); Here, index is the number of the last file that was added. |
Table 3. List of Events
Event |
Description |
|---|---|
Fires before the files are uploaded. |
|
Fires after the files are uploaded. |
|
Fires after the file is selected. |
Example
The following code is an example for uploading a photo to an OLE DB database.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Upload To OLEDB</title>
<script type="text/javascript" src="/cordys/wcp/application.js" ></script>
<script type="text/javascript">
function onUploadHandler()
{
if (window.application.event.status)
{
application.notify("Record updated ! " + window.application.event.response.xml);
}
else application.notify("Unable to upload...Response : \n\n" +
window.application.event.response.xml);
}
function updateRecord()
{
if(lname.value != "" && fname.value != "" && title.value !=
"" && chosenfile1.value != "")
{
var requestDoc = requestString.XMLDocument;
requestDoc.selectSingleNode(".//LastName").text = lname.value;
requestDoc.selectSingleNode(".//FirstName").text = fname.value;
requestDoc.selectSingleNode(".//Title").text = title.value;
uploader.request = requestDoc;
uploader.encode="true";
uploader.uploadFile();
}
else application.notify("Fill in all the fields before inserting the record");
}
</script>
</head>
<body>
<div cordysType="wcp.library.util.Upload" id="uploader" fileCount="1"
onupload="onUploadHandler()" automatic="false" async="false" style="display:none">
<script type="cordys/xml" id="requestString" >
<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/" >
<SOAP:Body>
<Update xmlns="http://schemas.cordys.com/1.0/demo/northwind" >
<tuple>
<new>
<Employees>
<LastName>Lname</LastName>
<FirstName>Fname</FirstName>
<Title>Title</Title>
<Photo>Upload:FileContent1</Photo>
<PhotoPath>http://accWeb/employees/Upload:FileName1</PhotoPath>
</Employees>
</new>
</tuple>
</Update>
</SOAP:Body>
</SOAP:Envelope>
</script>
</div>
<center><h3>Upload Demo - to OleDB</h3>
<h5>Fill in Employee details</h5>
<table>
<tr>
<td>LastName :</td>
<td><input type=text id="lname" ></td>
</tr>
<tr>
<td>FirstName :</td>
<td><input type=text id="fname" ></td>
</tr>
<tr>
<td>Title :</td>
<td><input type=text id="title" ></td>
</tr>
<tr>
<td>PhotoPath :</td>
<td>
<input type=text id="chosenfile1" ></input>
<button class="medium" id="choose" onclick="chosenfile1.value= uploader.browse(1)" >Choose Photo</button>
</td>
</tr>
</table>
<br><br>
<button class="medium" onclick="updateRecord()" >Insert Record</button>
</body>
</html>
Example
The following code is an example for uploading a file to XMLStore and this will work in all browsers.
<html>
<head>
<meta content="text/javascript" http-equiv="Content-Script-Type"/>
<script src="/cordys/wcp/application.js" type="text/javascript"/>
<script type="text/javascript"> function upload() {uploader.request = requestString.XMLDocument; uploader.setShowStatus(true); if(document.getElementById(&quot;file1&quot;).value != &quot;&quot;) uploader.uploadFile(document.getElementById(&quot;uploadForm1&quot;)); else alert(&quot;Choose a file to upload&quot;); }function onUploadHandler() {alert(window.application.event.status); if(window.application.event.status) { alert(cordys.getXML(window.application.event.response));}} </script>
<script id="requestString" type="cordys/xml">
<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
<SOAP:Body>
<UpdateXMLObject xmlns="http://schemas.cordys.com/1.0/xmlstore">
<tuple key="Upload:FileName1">
<new>
<upload>Upload:FileContent1</upload>
</new>
</tuple>
</UpdateXMLObject>
</SOAP:Body>
</SOAP:Envelope>
</script>
</head>
<body>
<div cordysType="wcp.library.util.Upload" encode="true"
id="uploader" onupload="onUploadHandler()"
style="display:none" xmlcontent="true"/>
<form action="com.eibus.web.tools.upload.Upload.wcp"
enctype="multipart/form-data" id="uploadForm1" method="post" name="uploadForm1">
<input id="file1" name="file1" type="file"/>
</form>
<br/>
<input id="but" name="Upload" onClick="upload()"
onclick="upload()" type="button" value="Upload"/>
</body>
</html>
For more details on using this functionality, refer to Uploading a File to a Service.